.web-react {
  .ant-tree {
    color: var(--color-c02);
  }

  .ant-tree-select-dropdown {
    margin-top: 6px;
  }

  .ant-tree-treenode-switcher-close,
  .ant-tree-treenode-switcher-open {
    .ant-tree-switcher-icon {
      svg {
        fill: var(--color-c04);
      }
    }
  }

  .ant-tree-treenode-selected {
    .tree-search-value,
    .site_tree_search_value {
      color: #fff !important;
    }

    .ant-tree-node-content-wrapper,
    .ant-tree-switcher,
    .ant-tree-indent {
      color: #fff;
      background-color: var(--color-c01) !important;
      transform: none !important;
    }

    .ant-tree-switcher-icon {
      svg {
        fill: #fff;
      }
    }
  }

  .ant-select-tree-node-content-wrapper {
    line-height: 30px;
  }

  // .ant-select-tree-node-content-wrapper:hover {
  //   color: var(--color-c01) !important;
  //   background-color: var(--color-c13) !important;
  // }

  // .ant-tree.ant-tree-directory .ant-tree-treenode:hover::before {
  //   // color: var(--color-c01) !important;
  //   background: var(--color-c12) !important;
  // }

  .ant-select-tree-node-content-wrapper:hover {
    color: var(--color-c01) !important;
    background-color: var(--color-c13);
  }

  .ant-tree.ant-tree-directory .ant-tree-treenode:hover::before {
    // color: var(--color-c01) !important;
    background: var(--color-c13);
  }

  .ant-tree.ant-tree-directory .ant-tree-treenode:hover {
    .ant-tree-switcher,
    .ant-tree-node-content-wrapper.ant-tree-node-selected {
      color: var(--color-c02);
    }
  }

  .ant-dropdown {
    .ant-dropdown-menu-item:hover {
      color: black !important;
    }
  }
}
